<template>
  <div>
    <head-top></head-top>
    <el-row style="margin-top: 20px">
      <el-col :span="12" :offset="4">
        <el-form
          :model="formData"
          :rules="rules"
          ref="formData"
          label-width="110px"
          class="demo-formData"
        >
          <el-form-item label="活动名称" prop="name">
            <el-input v-model="formData.name"></el-input>
          </el-form-item>

          <el-form-item label="活动介绍" prop="des">
            <el-input type="textarea" v-model="formData.des"></el-input>
          </el-form-item>
          <el-form-item label="活动规则" label-width="100px">
            <el-input type="textarea" v-model="formData.ruler"></el-input>
          </el-form-item>
          <el-form-item label="开始结束日期" label-width="120px">
            <el-date-picker
              v-model="formData.startDate"
              type="date"
              placeholder="开始日期"
              :picker-options="pickerOptions6"
            >
            </el-date-picker>
            <el-date-picker
              v-model="formData.endDate"
              type="date"
              placeholder="结束日期"
              :picker-options="pickerOptions7"
            >
            </el-date-picker>
          </el-form-item >
            <el-form-item prop="cover"  label="封面" label-width="100px">
                <el-row  >    
                    <el-col 
                     :span="3"  >            
                            <img v-if="formData.cover" ref="img"
                            style="width: 100px; height: 100px"
                            :src="formData.cover"
                            fit="fit"></img> 
                    </el-col>                
                </el-row>
                 <el-row type="flex" >    
                    <el-col :span="3">  
                             <el-upload class="avatar-uploader" action="http://localhost:8090/tourism/activity/addCover" 
                                :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"
                                 :data="{}"
                                :show-file-list="false"
                            >           
                           <el-button type="primary" >添加封面</el-button>
                             </el-upload>
                    </el-col> 
                </el-row>
                 
            </el-form-item>

          <el-form-item class="button_submit">
            <el-button type="primary" @click="submitForm('formData')"
              >立即创建</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import headTop from "@/components/headTop";
	import {mapActions, mapState} from 'vuex'
import { addActivity } from "@/api/activity";

export default {
  data() {
    return {
      formData: {
        name: "", //景点名称
        des: "", //地址
        ruler: "",
        startDate: "",

        endDate: "",
        cover:"",
      },
      rules: {
        name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
        des: [
          { required: true, message: "请输入活动介绍", trigger: "blur" },
        ],
        ruler: [
          { required: true, message: "请输入活动规则", trigger: "blur" },
        ],
        startDate: [
          { required: true, message: "请选择开始时间", trigger: "blur" },
        ],
         endDate: [
          { required: true, message: "请选择结束时间", trigger: "blur" },
        ],
          cover: [
          { required: true, message: "请选择封面"},
        ],
      },
      pickerOptions6: {
        //结束时间不能大于开始时间
        disabledDate: (time) => {
          if (this.formData.endDate) {
            return (
              time.getTime() > new Date(this.formData.endDate).getTime()
            );
          } else {
            //还没有选择结束时间的时候，让他只能选择今天之后的时间包括今天
            return time.getTime() < Date.now() - 8.64e7;
          }
        },
      },
      pickerOptions7: {
        disabledDate: (time) => {
          if (this.formData.startDate) {
            // - 1 * 24 * 60 * 60 * 1000//可以选择同一天
            return (
              time.getTime() < new Date(this.formData.startDate).getTime()
            );
          } else {
            //还没有选择结束时间的时候，让他只能选择今天之后的时间包括今天
            return time.getTime() < Date.now() - 8.64e7;
          }
        },
      },
    };
  },
  components: {
    headTop,
  },
 		mounted(){
			this.showLogin = true;
			// if (!this.adminInfo.id) {
    	// 		this.getAdminData()
    	// 	}
			//判断用户是否存在，不存在则获取admin信息
			if(!this.admin.id)
				this.getAdmin();
		},
		computed: {
			//结构映射属性，结构出vuex中的adminInfo，admin
			...mapState(['admin']),
		},

  methods: {
    async initData() {},

    submitForm(formName) {
      let that = this;
      if(!this.admin.id){
        console.log('err id not found');return
      }
      this.formData.holderId=this.admin.id;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          
          console.log("submitform:formdata", that.formData);

          addActivity(this.formData).then((res) => {
            console.log("addActivity ", res);
            if (res.code >= 0) {
              that.$message.success("上传成功");
              that.$router.push('activityList')
            } else {
              that.$message.error("上传失败");
            }
          });
        }
      });
    },


  handleAvatarSuccess(res, file) {
      if(res.code>=0){
        this.formData.cover = res.data    
        this.$message({
          message: '添加成功',
          type:"success"
        });
      }else{
         this.$message({
          message: res.message,
          type:"fail"
        });
      }
        
        console.log(res);
      },
      beforeAvatarUpload(file) {
        
        const isJPG = file.type === 'image/jpeg'||file.type=='image/jpg'||file.type=='png';
        const isLt2M = file.size / 1024 / 1024 < 2;
 
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG ,PNG,JPEG格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
  },
};
</script>

<style lang="less">
@import "../style/mixin";
.button_submit {
  text-align: center;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
.el-table .info-row {
  background: #c9e5f5;
}

.el-table .positive-row {
  background: #e2f0e4;
}
</style>
